<template>
    <div>
        <el-form label-width="100px">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="选择评价标准">
                        <el-select
                            v-model="experimentForm.standardEvaluation"
                            placeholder="请选择评价标准"
                            class="picker-form"
                            size="mini"
                        >
                            <el-option
                                v-for="(
                                    data, index
                                ) in experimentForm.standardEvaluationList"
                                standardEvaluation
                                :key="index"
                                :label="data.name"
                                :value="data.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col
                    :span="2"
                    :offset="1"
                    style="line-height: 40px"
                >
                    <el-button
                        type="primary"
                        size="mini"
                        @click="getExperimentData"
                    >统计
                    </el-button>
                </el-col>
                <el-col
                    :span="8"
                    :offset="3"
                >
                    <el-row style="line-height: 40px">
                        平均读片时间/片：<span class="time-color">{{
                            readSliceTime.averageReadSliceTime
                        }}</span> S</el-row>
                    <el-row style="line-height: 40px">
                        最长读片时间：<span class="time-color">{{
                            readSliceTime.maxReadSliceTime
                        }}</span> S</el-row>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="text-align: center; font-size: 16px; margin: 15px">诊断实验基本统计指标</el-row>
        <table
            border="2"
            style="border-collapse: collapse; width: 100%; text-align: center"
            bordercolor="#70ad47"
        >
            <tbody>
                <tr class="height40 bgcolor2">
                    <th rowspan="2">待评价试验</th>
                    <th colspan="3">标准诊断（金标准）方法</th>
                </tr>
                <tr class="height40 bgcolor2">
                    <td>病人</td>
                    <td>非病人</td>
                    <td>合计</td>
                </tr>
                <tr class="height40 bgcolor1">
                    <td>阳性</td>
                    <td>{{ experimentData.realPositiveCount }}</td>
                    <td>{{ experimentData.fakePositiveCount }}</td>
                    <td>{{experimentData.realPositiveCount +experimentData.fakePositiveCount}}</td>
                </tr>
                <tr class="height40 bgcolor2">
                    <td>阴性</td>
                    <td>{{ experimentData.fakeNegativeCount }}</td>
                    <td>{{ experimentData.realNegativeCount }}</td>
                    <td>{{experimentData.fakeNegativeCount +experimentData.realNegativeCount}}</td>
                </tr>
                <tr class="height40 bgcolor1">
                    <td>合计</td>
                    <td>{{ experimentData.realPositiveCount +experimentData.fakeNegativeCount}}</td>
                    <td>{{experimentData.fakePositiveCount +experimentData.realNegativeCount}}</td>
                    <td>
                        {{experimentData.realPositiveCount +experimentData.fakeNegativeCount +experimentData.fakePositiveCount +experimentData.realNegativeCount}}
                    </td>
                </tr>
                <tr
                    class="height40 bgcolor2"
                    style="height: 40px"
                >
                    <td colspan="4"></td>
                </tr>
                <tr class="height40 bgcolor1">
                    <td>敏感性：</td>
                    <td style="color:red;">{{experimentData.ratioOfRealPositiveStr}}%</td>
                    <td>假阴性率：</td>
                    <td>{{experimentData.ratioOfFakeNegativeStr}}%</td>
                </tr>
                <tr class="height40 bgcolor2">
                    <td>特异性：</td>
                    <td style="color:red;">{{ experimentData.ratioOfRealNegativeStr}}%</td>
                    <td>假阳性率：</td>
                    <td>{{experimentData.ratioOfFakePositiveStr}}%</td>
                </tr>
                <tr class="height40 bgcolor1">
                    <td>准确率</td>
                    <td>{{experimentData.ratioOfAccurateStr}}%</td>
                    <td>排阴率</td>
                    <td>{{experimentData.yinRateStr}}%</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name: 'DiagnosisResultStatisticsComp',
    props: {
        isAutoRefresh: { default: true, type: Boolean },
    },
    data() {
        return {
            timer: '',
            readSliceTime: {
                averageReadSliceTime: 0,
                maxReadSliceTime: 0,
            },
            experimentForm: {
                standardEvaluation: '',
                standardEvaluationList: [
                    {
                        name: '胃镜病理阴阳性',
                        id: 1,
                    },
                ],
            },
            experimentData: {
                fakeNegativeCount: '',
                fakePositiveCount: '',
                ratioOfAccurate: '',
                ratioOfFakeNegative: '',
                ratioOfFakePositive: '',
                ratioOfRealNegative: '',
                ratioOfRealPositive: '',
                realNegativeCount: '',
                realPositiveCount: '',
                yinRate: '',
            },
        };
    },
    mounted() {
        let _this = this;
        if (_this.isAutoRefresh) {
            _this.refresh();
            _this.timer = setInterval(() => {
                _this.refresh();
            }, 10000);
        } else {
            _this.refresh();
        }
    },
    watch: {},
    destroyed() {
        if (this.timer) clearInterval(this.timer);
    },
    methods: {
        refresh() {
            let _this = this;
            _this.getExperimentData();
            _this.getReadSliceTime();
        },
        getExperimentData() {
            let _this = this;
            _this
                .$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/biopsy/ai/statistic',
                })
                .then((res) => {
                    if (res && res.data.code === 200) {
                        Object.keys(res.data.data).forEach((key) => {
                            if (res.data.data[key] == null) {
                                res.data.data[key] = '0';
                            }
                        });
                        this.experimentData = res.data.data;
                    }
                });
        },
        getReadSliceTime() {
            let _this = this;
            _this
                .$axios({
                    method: 'GET',
                    url: `/PROXY-Remote/biopsy/calculateAllSliceOfTime`,
                })
                .then((res) => {
                    if (res && res.data.code === 200) {
                        Object.keys(res.data.data).forEach((key) => {
                            if (res.data.data[key] == null) {
                                res.data.data[key] = '0';
                            }
                        });
                        _this.readSliceTime = res.data.data;
                    }
                });
        },
    },
};
</script>

<style scoped>
.height40 {
    height: 40px;
    line-height: 40px;
}
.bgcolor1 {
    background-color: #d5e3cf;
}
.bgcolor2 {
    background-color: #ebf1e9;
}
.time-color {
    color: #008cc8;
    font-weight: bold;
}
</style>